<template>
  <div>
    <h3>商品清单如下</h3>
    <div v-for="(obj, index) in list" :key="index">
      {{ obj.shopName }}:{{ obj.price }}元/份
    </div>
    <p>请选择购买数量</p>
    <eat
      :name="item.shopName"
      :number="item.count"
      :index="index"
      v-for="(item, index) in list"
      :key="index"
      @zheng="zheng"
      @fu="fu"
    >
    </eat>
    <p>总价为:{{ superstop }}</p>
  </div>
</template>

<script>
import eat from "./components/food";
export default {
  components: {
    eat,
  },
  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    superstop() {
      return this.list.reduce((sum, obj) => (sum += obj.count * obj.price), 0);
    },
  },
  methods: {
    zheng(index) {
      this.list[index].count++;
    },
    fu(index) {
      this.list[index].count > 0 && this.list[index].count--;
    },
  },
};
</script>

<style>
</style>